'use strict'
import { App, View } from '../../../component'
import style from './css.css'
import setTitle from '../../../config/setTitle'
import { observer, inject } from 'mobx-react'

@inject('user') @observer class Share extends React.Component {
  static propTypes = {
    user: PropTypes.object,
    history: PropTypes.object
  }
  state = {
    hide: true
  }
  _handleInvite = this._handleInvite.bind(this)
  _handleWx = this._handleWx.bind(this)
  componentDidMount () {
    setTitle('邀请好友')
    if (this.props.user.shareInfo.code === 0) { this.props.user.getInviteCode() }
  }
  _renderCode () {
    const { code } = this.props.user.shareInfo
    if (code) {
      return (<View className={style.inviteCode}>{code}</View>)
    }
  }
  _handleInvite () {
    this.props.history.push('/set/invitation')
  }
  _handleWx () {
    this.setState({ hide: false })
  }
  render () {
    return (
      <App noSysScroll={false}>
        <View className={style.InviteFriend}>
          <View className={style.dollIcon}></View>
          <View className={style.inviteR}>
            <View className={style.text}>每邀请一个好友加入并输入您的邀请 <br />码，您和被邀请人都将获得20金币奖<br />励，最多可获得1000金币</View>
            <View className={`${style.text1} ${style.padding_t}`}>我的邀请码</View>
            {this._renderCode()}
            <View className={`${style.text} ${style.padding_t1}`}>分享给好友免费得金币</View>
            <View className={style.shareApp}>
              <View className={style.appStyle} tap={this._handleWx}>
                <View className={style.appIcon}></View>
                <View>微信好友</View>
              </View>
              <View className={style.appStyle} tap={this._handleWx}>
                <View className={style.appIcon1}></View>
                <View>朋友圈</View>
              </View>
              <View className={style.appStyle} tap={this._handleWx}>
                <View className={style.appIcon2}></View>
                <View>QQ好友</View>
              </View>
              <View className={style.appStyle} tap={this._handleWx}>
                <View className={style.appIcon3}></View>
                <View>QQ空间</View>
              </View>

            </View>
            <View tap={this._handleInvite} className={style.text2}>我要填写邀请码</View>
          </View>
        </View>
        <View className={ this.state.hide ? style.hide : style.shareBox } tap={() => { this.setState({ hide: true }) }} >
          <View className={ style.share }></View>
        </View>
      </App>
    )
  }
}

export default Share

